<template>
	<view class="content">

		<!-- 搜索框 -->
		<my-search @cilck="getSearch"></my-search>

		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in swiperList" :key="index">

				<navigator class="swiper-item" :url="`/pages-supper/swiper/swiper?goods_id=${item.goods_id}`">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>
		</swiper>

		<!-- 导航 -->
		<view class="nav">
			<view class="lis" v-for="(item,index) in catitemsList" :key="index" @click="goCate(item)">
				<image :src="item.image_src" mode=""></image>   
			</view>

		</view>

		<!-- 楼层 -->
		<view class="floor">
			<view class="floor_title" v-for="(item,index) in floorList" :key="index">
				<image class="img2" :src="item.floor_title.image_src" mode=""></image>
				<view class="product_list">
					<!-- 左边大图 -->
					<navigator class="list_left" :url="item.product_list[0].url">
						<image :src="item.product_list[0].image_src" mode=""></image>
					</navigator>
					<!-- 右边小图 -->
					<view class="list_right">
						<navigator class="list_right_img" v-for="(item2,index2) in item.product_list" :key="index2"
							v-if="index2!==0" :url="item2.url">
							<image :src="item2.image_src" mode="" class="img4"></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		swiperdata,
		catitems,
		floordata
	} from "@/api/result.js";


	export default {
		data() {
			return {
				swiperList: [],
				catitemsList: [],
				floorList: []
			}
		},
		onLoad() {
			this.getSwiper();
			this.getCatitem();
			this.getFloor();
		},
		methods: {
			// 轮播图
			async getSwiper() {
				const {
					data: res
				} = await swiperdata();
				// console.log(res);
				console.log(swiperdata)
				if (res.meta.status !== 200) return uni.$showMag();
				this.swiperList = res.message;
			},
			// 导航
			async getCatitem() {
				const {
					data: res
				} = await catitems();
				// console.log(res);
				if (res.meta.status !== 200) return uni.$showMag();
				this.catitemsList = res.message;
			},
			// 楼层

			async getFloor() {
				const {
					data: res
				} = await floordata();
				console.log(res);
				if (res.meta.status !== 200) return uni.$showMag();
				// 给楼层数据当中的product_list 里头的每一项  url 
				
				res.message.forEach(floor => {
					floor.product_list.forEach(prod => {
						prod.url = '/pages-supper/goods_list/goods_list?' + prod.navigator_url.split(
							'?')[1];
					})
				});
				this.floorList = res.message;
			},

			goCate(item) {
				if (item.name === '分类') {
					uni.switchTab({
						url: "/pages/cate/cate"
					})
				} else if (item.name === "秒杀拍") {
					uni.navigateTo({
						url: "/pages-supper/seckill/seckill"
					})
				} else if (item.name === "超市购") {
					uni.navigateTo({
						url: "/pages-supper/chaoshi/chaoshi"
					})
				} else if (item.name === "母婴品") {
					uni.navigateTo({
						url: "/pages-supper/muying/muying"
					})
				}

			},
			getSearch() {
				console.log("自定义事件")
			}

		}
	}
</script>

<style lang="scss">
	swiper {
		width: 100%;
		height: 340rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}



	// 导航样式
	.nav {
		height: 200rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 10rpx 0;

		.lis {
			width: 140rpx;
			height: 160rpx;

			.lis,
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 楼层
	.floor {
		height: 400rpx;
		margin: 10rpx;

		.floor_title {
			margin: 20rpx 0;

			.img2 {
				height: 60rpx;
				display: block;
			}

			.product_list {

				height: 340rpx;
				display: flex;
				justify-content: space-between;

				.list_left {
					width: 35%;

					.list_left,
					image {
						width: 100%;
						height: 100%;
					}
				}

				.list_right {
					width: 63%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;

					.list_right_img {
						width: 48%;
						height: 48.5%;

						.img4 {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>
